<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      :background-color="backgroundColor"
      :color="navBarColor"
      title="等级中心"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- 主内容 -->
    <view class="content">
      <!-- 等级卡片 - 浅色背景 -->
      <view class="level-card">
        <view class="level-left">
          <view class="level-tag">今日等级</view>
          <text class="level-name">普通商家</text>
          <text class="level-tip">* 商家评级每日00:00:00更新，今日已更新</text>
        </view>
        <image src="/static/logo.png" class="level-badge" mode="aspectFit" />
      </view>
      <view class="score-section">
        <view class="score-header">
          <text class="score-label">商家评分</text>
          <view class="score-link" @click="showRules">
            <text>等级权益说明</text>
            <uni-icons
              type="right"
              size="14"
              color="rgba(255,255,255,0.6)"
            ></uni-icons>
          </view>
        </view>
        <text class="score-value">{{ merchantScore }}</text>
      </view>
      <view class="rights-section">
        <text class="rights-title">普通商家权益：</text>
        <text class="rights-desc"
          >当前为普通商家评级，无特殊权益，请继续努力喔～
        </text>
      </view>
      <!-- 深色区域容器 -->
      <view class="dark-container">
        <!-- 区域3：今日得分和历史评分 -->
        <view class="action-section">
          <view class="action-btn" @click="showTodayDetail">
            今日得分明细
          </view>
          <view class="action-link" @click="showHistory">
            历史评分
            <uni-icons type="right" size="14"></uni-icons>
          </view>
        </view>

        <!-- 区域4：数据卡片 -->
        <view class="data-cards-section">
          <view class="data-card">
            <view class="card-header">
              <text class="card-title">积分总额</text>
              <uni-icons
                type="info"
                size="16"
                @click="showIndicatorModal('points')"
              ></uni-icons>
            </view>
            <view class="card-value-row">
              <text class="card-value">0</text>
              <text class="card-unit">.23</text>
            </view>
          </view>
          <view class="data-card">
            <view class="card-header">
              <text class="card-title">下单用户数</text>
              <uni-icons
                type="info"
                size="16"
                @click="showIndicatorModal('users')"
              ></uni-icons>
            </view>
            <view class="card-value-row">
              <text class="card-value">0</text>
              <text class="card-unit">.73</text>
            </view>
          </view>
        </view>
        <!-- 区域5：评分指标 - 白色背景 -->
        <view class="score-indicators">
          <view
            v-for="item in indicators"
            :key="item.key"
            class="indicator-item"
          >
            <view class="indicator-header">
              <text class="indicator-label">{{ item.label }}</text>
              <uni-icons
                type="info"
                size="16"
                color="#999"
                @click="showIndicatorModal(item.key)"
              ></uni-icons>
            </view>
            <text class="indicator-value">{{ item.value }}</text>
          </view>
        </view>

        <!-- 区域6：订单记录和说明 -->
        <view class="bottom-section">
          <view class="record-button" @click="handleOrderRecord">
            <text>订单记录</text>
          </view>
          <text class="bottom-tip"
            >* 上述展示均为单项指标得分，统计周期为近30天。
          </text>
        </view>
      </view>
    </view>

    <!-- 指标弹框 -->
    <!-- 积分总额 -->
    <IndicatorModal
      ref="pointsModalRef"
      title="积分总额"
      :percentage="1"
      score="0.23"
      scoreDetail="354.69/30000"
    />

    <!-- 下单用户数 -->
    <IndicatorModal
      ref="usersModalRef"
      title="下单用户数"
      :percentage="4"
      score="0.73"
      scoreDetail="11/300"
    />

    <!-- 店铺评分 -->
    <IndicatorModal
      ref="storeScoreModalRef"
      title="店铺评分"
      :percentage="100"
      score="10"
      scoreDetail="5/5"
    >
      <view class="complete-tasks">
        <view class="task-item completed">
          <uni-icons
            type="checkmarkempty"
            size="20"
            color="#ff9900"
          ></uni-icons>
          <text class="task-text">联系电话</text>
        </view>
        <view class="task-item completed">
          <uni-icons
            type="checkmarkempty"
            size="20"
            color="#ff9900"
          ></uni-icons>
          <text class="task-text">营业时间</text>
        </view>
      </view>
    </IndicatorModal>

    <!-- 订单量 -->
    <IndicatorModal
      ref="orderCountModalRef"
      title="订单量"
      :percentage="4"
      score="0.73"
      scoreDetail="11/300"
    >
      <view class="modal-button" @click="handleViewOrders">查看订单</view>
    </IndicatorModal>

    <!-- 新增粉丝数 -->
    <IndicatorModal
      ref="fansModalRef"
      title="新增粉丝数"
      :percentage="0"
      score="0"
      scoreDetail="0/20"
    >
      <view class="modal-button" @click="handleInviteFans">邀请粉丝</view>
    </IndicatorModal>

    <!-- 商品数量 -->
    <IndicatorModal
      ref="productCountModalRef"
      title="商品数量"
      :percentage="60"
      score="3"
      scoreDetail="60/100"
    />

    <!-- 销量 -->
    <IndicatorModal
      ref="salesModalRef"
      title="销量"
      :percentage="60"
      score="3"
      scoreDetail="60/100"
    />

    <!-- 信息完整度 -->
    <IndicatorModal
      ref="completenessModalRef"
      title="信息完整度"
      :percentage="100"
      score="10"
      scoreDetail="2/2"
    >
      <view class="complete-tasks">
        <view class="task-item completed">
          <uni-icons
            type="checkmarkempty"
            size="20"
            color="#ff9900"
          ></uni-icons>
          <text class="task-text">联系电话</text>
        </view>
        <view class="task-item completed">
          <uni-icons
            type="checkmarkempty"
            size="20"
            color="#ff9900"
          ></uni-icons>
          <text class="task-text">营业时间</text>
        </view>
      </view>
      <view class="modal-button" @click="handleCompleteInfo">完善信息</view>
    </IndicatorModal>
  </view>
</template>

<script setup>
import { ref } from "vue";
import IndicatorModal from "./components/IndicatorModal.vue";

// 导航栏配置
const backgroundColor = ref("#1d1207");
const navBarColor = ref("#fff");

// 商家评分
const merchantScore = ref("27.69");

// 评分指标
const indicators = ref([
  { key: "storeScore", label: "店铺评分", value: "10" },
  { key: "orderCount", label: "订单量", value: "0.73" },
  { key: "fans", label: "新增粉丝数", value: "0" },
  { key: "productCount", label: "商品数量", value: "3" },
  { key: "sales", label: "销量", value: "3" },
  { key: "completeness", label: "信息完整度", value: "10" },
]);

// 弹框 ref
const pointsModalRef = ref(null);
const usersModalRef = ref(null);
const storeScoreModalRef = ref(null);
const orderCountModalRef = ref(null);
const fansModalRef = ref(null);
const productCountModalRef = ref(null);
const salesModalRef = ref(null);
const completenessModalRef = ref(null);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 显示规则
const showRules = () => {
  uni.navigateTo({
    url: "/pages/mine/levelCenter/levelRights",
  });
};

// 显示今日得分明细
const showTodayDetail = () => {
  uni.showToast({
    title: "今日得分明细",
    icon: "none",
  });
  // TODO: 显示今日得分明细
};

// 显示历史评分
const showHistory = () => {
  uni.showToast({
    title: "历史评分",
    icon: "none",
  });
  // TODO: 跳转到历史评分页面
};

// 订单记录
const handleOrderRecord = () => {
  uni.showToast({
    title: "订单记录",
    icon: "none",
  });
  // TODO: 跳转到订单记录页面
};

// 显示指标弹框
const showIndicatorModal = (key) => {
  const modalMap = {
    points: pointsModalRef,
    users: usersModalRef,
    storeScore: storeScoreModalRef,
    orderCount: orderCountModalRef,
    fans: fansModalRef,
    productCount: productCountModalRef,
    sales: salesModalRef,
    completeness: completenessModalRef,
  };

  const modalRef = modalMap[key];
  if (modalRef && modalRef.value) {
    modalRef.value.open();
  }
};

// 查看订单
const handleViewOrders = () => {
  orderCountModalRef.value?.close();
  uni.showToast({
    title: "查看订单",
    icon: "none",
  });
  // TODO: 跳转到订单页面
};

// 邀请粉丝
const handleInviteFans = () => {
  fansModalRef.value?.close();
  uni.showToast({
    title: "邀请粉丝",
    icon: "none",
  });
  // TODO: 实现邀请粉丝功能
};

// 完善信息
const handleCompleteInfo = () => {
  completenessModalRef.value?.close();
  uni.showToast({
    title: "完善信息",
    icon: "none",
  });
  // TODO: 跳转到完善信息页面
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #1d1207;
}

.content {
  padding: 30rpx 40rpx 30rpx;
}

// 等级卡片 - 浅色背景
.level-card {
  background-color: #e8e8e8;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.level-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.level-tag {
  padding: 8rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #666;
  align-self: flex-start;
}

.level-name {
  font-size: 56rpx;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.level-tip {
  font-size: 20rpx;
  color: #999;
  line-height: 1.4;
}

.level-badge {
  width: 120rpx;
  height: 120rpx;
  flex-shrink: 0;
}

// 深色区域容器
.dark-container {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

// 区域1：商家评分
.score-section {
  padding: 30rpx;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}

.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.score-label {
  font-size: 28rpx;
  color: #fff;
  font-weight: 600;
}

.score-link {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);

  &:active {
    opacity: 0.7;
  }
}

.score-value {
  display: block;
  font-size: 96rpx;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

// 区域2：普通商家权益
.rights-section {
  padding: 30rpx;
}

.rights-title {
  display: block;
  font-size: 26rpx;
  color: #fff;
  font-weight: 500;
  margin-bottom: 12rpx;
}

.rights-desc {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

// 区域3：今日得分和历史评分
.action-section {
  position: relative;
  padding: 30rpx 30rpx 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20rpx;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}

.action-btn {
  position: absolute;
  top: 0;
  left: 0;
  height: 72rpx;
  padding: 0 20rpx;
  background-color: #000;
  line-height: 78rpx;
  font-size: 26rpx;
  color: #fff5e6;
  font-weight: bold;
  border-radius: 16rpx 0 16rpx 0;

  &:active {
    opacity: 0.8;
  }
}

.action-link {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 26rpx;
  white-space: nowrap;

  &:active {
    opacity: 0.7;
  }
}

// 区域4：数据卡片
.data-cards-section {
  display: flex;
  gap: 2rpx;
  background-color: rgba(255, 255, 255, 0.1);
}

.data-card {
  flex: 1;
  padding: 30rpx;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 24rpx;
}

.card-value-row {
  display: flex;
  align-items: baseline;
}

.card-value {
  font-size: 64rpx;
  font-weight: 700;
  line-height: 1;
}

.card-unit {
  font-size: 40rpx;
  font-weight: 700;
}

// 区域5：评分指标 - 白色背景
.score-indicators {
  background-color: #fff;
  padding: 0 30rpx 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx 20rpx;
}

.indicator-item {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.indicator-header {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.indicator-label {
  font-size: 24rpx;
  color: #666;
}

.indicator-value {
  font-size: 40rpx;
  font-weight: 600;
  color: #333;
  line-height: 1;
}

// 区域6：订单记录和说明
.bottom-section {
  background-color: #fff;
  padding: 0 30rpx 30rpx;
  border-radius: 16rpx;
}

.record-button {
  width: 100%;
  height: 88rpx;
  background-color: #2a1e0f;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;

  text {
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
  }

  &:active {
    opacity: 0.8;
  }
}

.bottom-tip {
  display: block;
  text-align: center;
  font-size: 22rpx;
  color: #999;
  line-height: 1.5;
}

// 弹框内容样式
.complete-tasks {
  margin-bottom: 24rpx;
  display: flex;
  flex-direction: column;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 0 0;
  background-color: #fff;
  border-radius: 12rpx;

  &.completed {
    background-color: #fff9ee;
  }
}

.task-text {
  font-size: 26rpx;
  color: #333;
}

.modal-button {
  width: 100%;
  height: 80rpx;
  background-color: #1d1207;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #fff;
  font-weight: 600;

  &:active {
    opacity: 0.8;
  }
}
</style>
